<template>
  <nav class="header-nav">
    <!-- 上部分 -->
    <div class="top">
      <div class="content">
        <!-- logo -->
        <div class="logo">
          <router-link class="logo-a" to="/home"></router-link>
        </div>
        <!-- nav -->
        <ul class="nav">
          <li v-for="(item, index) in navItems" :key="index" :class="{
            active: currentPage === item.name,
            fst: index === 0,
            lst: index === navItems.length - 1
          }" @click="selectPage(item.name, item.path)">
            <span>
              <div class="link">
                <span>{{ item.label }}</span>
                <!-- 选中状态下才显示sub -->
                <sub v-if="currentPage === item.name" class="cor">&nbsp;</sub>
              </div>
            </span>
          </li>
        </ul>

        <!-- search -->
        <div class="search">
          <el-popover placement="bottom" :width="500" trigger="click" @hide="clearSearch">
            <template #reference>
              <el-input v-model="searchValue" class="search-input" placeholder="音乐/视频/电台/用户" :prefix-icon="Search"
                @change="handleSearch" />
            </template>
            <template #default>1111</template>
          </el-popover>
        </div>
        <!-- user -->
        <a class="user" @click="selectPage('creationcenter', '')">创作者中心</a>
        <!-- avatar -->
        <div class="avatar">
          <div v-if="!userStore.isLoggedIn" class="login" @click="showLogin">登录</div>
          <div v-else>
            <el-popover
              :popper-style="{ background: '#2b2b2b', border: '1px solid #202020', boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.50)', padding: '0' }"
              placement="bottom" :width="162" :hide-after="0" trigger="hover" popper-class="popover">
              <template #reference>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="35"
                  @error="errorHandler">
                  <!-- <img src="/src/assets/navBar/avatar/loginin.png" /> -->
                </el-avatar>
              </template>
              <div>
                <div class="popover-item" v-for="(item, index) in popoverItems" :key="index"
                  @click="selectPage(item.name, '')">
                  <span class="icon">{{ item.icon }}</span>
                  <span class="text">{{ item.text }}</span>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <!-- 登录弹窗 -->
  <LoginDialog ref="loginDialog" />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, defineEmits, defineAsyncComponent, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import LoginDialog from '../components/LoginDialog.vue';
import useStore from '../store/user.ts';

// 用户状态
const userStore = useStore();

const router = useRouter();

const loginDialog = ref();
const showLogin = () => {
  loginDialog.value.showPanel();
};

// 定义导航菜单
const navItems = [
  { name: 'discover', label: '发现音乐', path: '' },
  { name: 'b', label: '我的音乐', path: '' },
  { name: 'attention', label: '关注', path: '' },
  { name: 'store', label: '商城', path: '/shopping' },
  { name: 'musician', label: '音乐人', path: '/musician' },
  { name: 'cloud', label: '云推歌', path: '/adsong' },
  { name: 'download', label: '下载客户端', path: '' }
];

// 头像下拉框
const popoverItems = [
  { icon: 'X', text: '我的主页', name: 'myinfo' },
  { icon: 'X', text: '我的消息', name: 'myHome' },
  { icon: 'X', text: '我的等级', name: 'myHome' },
  { icon: 'X', text: 'VIP会员', name: 'myHome' },
  { icon: 'X', text: '个人设置', name: 'infoupdate' },
  { icon: 'X', text: '实名认证', name: 'myHome' },
  { icon: 'X', text: '退出', name: 'myHome' }
];

// 默认选中第一个
const currentPage = ref(navItems[0].name);

const emit = defineEmits<{
  (e: 'changePage', page: string, path: string): void;
}>();

// 显示全部(默认false)
const showAll = ref(false);
const clearSearch = () => {
  showAll.value = false;
};
// 搜索框值
const searchValue = ref('');
// 搜索按钮点击事件
const handleSearch = () => {
  // 搜索逻辑
  // ...
};

// 切换页面
const selectPage = (page: string, path: string) => {
  currentPage.value = page;
  emit('changePage', page, path);
};
// 切换下部分导航页面
const selectBottomPage = (page: string) => {
  currentBottomPage.value = page;
};

const AsyncComponent = computed(() => componentsMap[currentBottomPage.value]);

const componentsMap: Record<string, any> = {
  recommend: defineAsyncComponent(() => import('../views/Recommend.vue')),
  myinfo: defineAsyncComponent(() => import('../views/MyInfo.vue')),
  infoupdate: defineAsyncComponent(() => import('../views/InfoUpdate.vue'))
};

</script>

<style lang="scss" scoped>
/* 头像下拉框 */
:deep(.popover) {
  padding: 0px !important;
}

:deep(.el-popper.is-light) {
  background: #2b2b2b !important;
}

:deep(.el-popper__arrow:before) {
  background: #2b2b2b !important;
}

:deep(.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before) {
  background: #2b2b2b !important;
  border: 1px solid #202020 !important;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.50) !important;
}

/* =========== 切换动画 =========== */
.loading {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* =========== 导航栏 =========== */
.header-nav {
  width: 100%;
  // height: 105px;

  .top {
    // position: relative;
    // z-index: 1000;
    width: inherit;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;

    .content {
      width: 1100px;
      display: flex;
      align-items: center;
      margin: 0 auto;

      .logo {
        width: 176px;
        height: 69px;
        background-position: 0 0;
        background: url(../assets/Home/Nav/topbar.png) no-repeat;

        .logo-router-link {
          width: 157px;
          height: 100%;
          padding-right: 20px;
        }
      }

      .nav {
        display: flex;

        li {
          position: relative;
          background-position: right -300px;
          height: 70px;
          font-size: 14px;
          cursor: pointer;

          .link {
            padding: 0 19px;
            text-align: center;
            line-height: 70px;
            color: #ccc;
            z-index: -999;

            &:hover {
              background: #000;
              text-decoration: none;
              color: #fff;
            }
          }

          &.active .link {
            background: #000;
            color: #fff;
          }

          .cor {
            display: block;
            position: absolute;
            left: 50%;
            top: 64px;
            width: 12px;
            height: 7px;
            margin-left: -6px;
            overflow: hidden;
            background-position: -226px 0 !important;
            background: url(../assets/Home/Nav/topbar.png) no-repeat;
          }
        }
      }

      .search {
        width: 170px;
        height: 30px;

        .search-input {

          // 外层
          :deep(.el-input__wrapper) {
            border-radius: 20px;
            // 边框
            --el-input-focus-border-color: white;
            --el-input-border-color: white;
          }

          // 内层
          :deep(.el-input__inner) {}
        }
      }

      .user {
        width: 90px;
        height: 32px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #4f4f4f;
        font-size: 12px;
        line-height: 33px;
        color: #ccc;
        border-radius: 20px;
        cursor: pointer;

        &:hover {
          color: #fff;
          border: 1px solid #ccc;
        }
      }

      .avatar {
        margin-left: 20px;

        .login {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          color: #787878;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .login:hover {
          color: #999;
        }
      }
    }
  }

  // 下部分
  .bottom {
    height: 35px;
    box-sizing: border-box;
    background-color: #c20c0c;
    border-bottom: 1px solid #a40011;

    .b-content {
      width: 1100px;
      height: 34px;
      margin: 0 auto;

      .nav {
        display: flex;
        padding-left: 180px;

        li {
          height: 34px;
          text-align: center;

          .link {
            span {
              display: inline-block;
              height: 20px;
              padding: 0 13px;
              margin: 7px 17px 0;
              border-radius: 20px;
              line-height: 21px;
              font-size: 12px;
              color: #fff;

              &:hover {
                background-color: #a40011;
              }
            }
          }

          &.active .link span {
            background-color: #a40011;
          }
        }
      }
    }
  }
}


// 头像下拉框
.popover-item {
  width: 100%;
  line-height: 33px;
  background: #242424;
  border-bottom: 1px solid #000;

  .content {
    width: 1100px;
    display: flex;
    align-items: center;
    margin: 0 auto;

    .logo {
      width: 176px;
      height: 69px;
      background-position: 0 0;
      background: url(../assets/Home/Nav/topbar.png) no-repeat;

      .logo-router-link {
        width: 157px;
        height: 100%;
        padding-right: 20px;
      }
    }

    .nav {
      display: flex;

      li {
        position: relative;
        background-position: right -300px;
        height: 70px;
        font-size: 14px;
        cursor: pointer;

        .link {
          padding: 0 19px;
          text-align: center;
          line-height: 70px;
          color: #ccc;
          z-index: -999;

          &:hover {
            background: #000;
            text-decoration: none;
            color: #fff;
          }
        }

        &.active .link {
          background: #000;
          color: #fff;
        }

        .cor {
          display: block;
          position: absolute;
          left: 50%;
          top: 64px;
          width: 12px;
          height: 7px;
          margin-left: -6px;
          overflow: hidden;
          background-position: -226px 0 !important;
          background: url(../assets/Home/Nav/topbar.png) no-repeat;
        }
      }
    }

    .search {
      width: 170px;
      height: 30px;

      .search-input {

        // 外层
        :deep(.el-input__wrapper) {
          border-radius: 20px;
          // 边框
          --el-input-focus-border-color: white;
          --el-input-border-color: white;
        }

        // 内层
        :deep(.el-input__inner) {}
      }
    }

    .user {
      width: 90px;
      height: 32px;
      margin-left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #4f4f4f;
      font-size: 12px;
      line-height: 33px;
      color: #ccc;
      border-radius: 20px;
      cursor: pointer;

      &:hover {
        color: #fff;
        border: 1px solid #ccc;
      }
    }

    .avatar {
      margin-left: 20px;

      .login {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        color: #787878;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .login:hover {
        color: #999;
      }
    }
  }
}


// 下部分
.bottom {
  height: 35px;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;

  .b-content {
    width: 1100px;
    height: 34px;
    margin: 0 auto;

    .nav {
      display: flex;
      padding-left: 180px;

      li {
        height: 34px;
        text-align: center;

        .link {
          span {
            display: inline-block;
            height: 20px;
            padding: 0 13px;
            margin: 7px 17px 0;
            border-radius: 20px;
            line-height: 21px;
            font-size: 12px;
            color: #fff;

            &:hover {
              background-color: #a40011;
            }
          }
        }

        &.active .link span {
          background-color: #a40011;
        }
      }
    }
  }
}

// 头像下拉框
.popover-item {
  width: 100%;
  line-height: 33px;
  background: #242424;
  color: rgb(196, 196, 196);
  font-size: 12px;
  font-weight: 500;
  padding-left: 28px;
  cursor: pointer;

  .icon {
    margin-right: 15px;
    color: rgb(140, 140, 140);
  }
}

.popover-item:hover {
  background: #323232;
}

.popover-item:hover .text {
  color: rgb(239, 239, 239);
}
</style>
